/**
 * Created by Freeman on 16/12/12.
 */
import React, {Component, PropTypes} from 'react'
import {observer} from 'mobx-react'
import '../styles/PlayingList.css'
import xunhuan from '../assets/icon-xunhuan.png'
import icon_playing from '../assets/icon-playing.svg'
import icon_black from '../assets/icon-...black.png'
@observer
class PlayingList extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    const {musicStore,showPlayList} = this.props;
    return (
      <div id="playing-list">
        <div className="tittle border-1px border-1px-after ">
          <img src={xunhuan} alt="顺序播放"/>
          <p className="tittle-text">顺序播放 {musicStore.music.playList.length}首歌曲</p>
          <p className="tittle-button" onClick={showPlayList} onTouchEnd={showPlayList}>完成</p>
        </div>
        <div className="m-list">
          <ul>
            {
              musicStore.music.playList.map((item,num)=>(
                <li className="border-1px border-1px-after list-item" key={num}>
                  <div className="music-info">
                    <p className="music-name">{item.name}</p>
                    <p className="music-author">-{item.singer}</p>
                    {
                      musicStore.music.index === num && <img className="music-playing" src={icon_playing} alt="正在播放"/>
                    }
                  </div>
                  <div className="action-button">
                    <img src={icon_black}/>
                  </div>
                </li>
              ))
            }

          </ul>
        </div>
      </div>
    )
  }
}
PlayingList.propTypes = {
  musicStore:PropTypes.object.isRequired,
  showPlayList:PropTypes.func.isRequired
}

export default PlayingList